<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ include file="/taglibs.jsp" %>
<head>

<script type="text/javascript">
function clearLookupField(id, name) {
	$(id).attr("value","");
	$(name).attr("value","");
}
$(function() {
	$("#save, #saveAndNew, #cancel" ).button();
	$("#save").click(function(){
		if($("#newCatalogForm").valid()) {
			newCatalogForm.action="catalog!create.action";
			newCatalogForm.submit();
		}});
	$("#saveAndNew").click(function(){
		if($("#newCatalogForm").valid()) {
			newCatalogForm.action="catalog!createAndNew.action";
			newCatalogForm.submit();
		}});
	$("#cancel").click(function(){window.location='catalog!index.action';});
	
	$("#newCatalogForm").validate({
        rules: { 
		    'catalog.catalogId': {remote:"catalog!checkUniqueness.action?checkedField=catalogId"},
            'catalog.catalogName': {remote:"catalog!checkUniqueness.action?checkedField=catalogName"}
        },
		onkeyup: false,
		messages: {
			'catalog.catalogId': {
				remote: jQuery.validator.format("<s:text name='error.uniqueConstraint'/>")	
			},'catalog.catalogName': {remote: jQuery.validator.format("<s:text name='error.uniqueConstraint'/>")}
		}
	});
	
	/* jqgrid in pop up select box */
	jQuery("#list").jqGrid( {
		url : 'catalog!catalogJsonList.action',
		datatype : "json",
		prmNames : {
			page : "jq.requestPage", rows : "jq.pageSize", sort : "jq.sortColumn",
			order : "jq.sortDirection", search : "jq._search", nd : "jq.nd", npage : null},
		jsonReader : {
			root : "rows", repeatitems : false, id : "0"},
		colNames : [ '<s:text name="module.common.id"/>',
					 '<s:text name="module.catalog.catalogId"/>', 
		 			 '<s:text name="module.catalog.catalogName"/>', 
		 			 '<s:text name="module.catalog.parentCatalogName"/>'],
		colModel : [ {name : 'id',index : 'id', width : 20, hidden:true}, 
					 {name : 'catalogId',index : 'catalogId', width : 140},
		     		 {name : 'catalogName',index : 'catalogName',width : 180},
		     		 {name : 'parentCatalog.catalogName', sortable : false,width : 180}],		
		rowNum : 15,
		rowList : [15,30,50],
		height: 'auto',
		pager : '#pager',
		sortname : 'catalogId',
		viewrecords: true,
		sortorder : 'asc',
		loadOnce : true,
		caption : false
	});
	jQuery("#list").jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});


	/* popup select box fo parent catalog*/
	$( "#popupDialogSelectBox" ).dialog({
		autoOpen: false,
		height: 400,
		width: 520,
		modal: true,
		buttons: {
			"Select": function() {
				var id = jQuery("#list").jqGrid('getGridParam','selrow');
				if (id)	{
					var ret = jQuery("#list").jqGrid('getRowData',id);
					$("#parentCatalogId").attr("value",ret.id);
					$("#parentCatalogName").attr("value",ret.catalogName);
					$( this ).dialog( "close" );
				} else { alert("Please select row");}
				$( this ).dialog( "close" );
			},
			Cancel: function() {
				$( this ).dialog( "close" );
			}
		},
		close: function() {
			allFields.val( "" ).removeClass( "ui-state-error" );
		}
	});
});//end
</script>

</head>
<body>
	<div class="page-header">
	  <h1>
		<s:if test="%{catalog.id==null}">
			<s:text name="module.catalog.createCatalog"/>
		</s:if>
		<s:else>
			<s:text name="module.catalog.editCatalog"/>
		</s:else>
	  </h1>
	</div>
	
	<div id="popupDialogSelectBox" title="Select a parent catalog">
	<table id="list"></table>
	<div id="pager"></div>
	</div>
	
	<form id="newCatalogForm" action="catalog!create.action" validate="true" class="form-horizontal" autocomplete="off" method="POST">
		<s:hidden name="catalog.id"/>
		<fieldset >
		<legend>General Information</legend>
			<div class="control-group">
				<label class="control-label" for="catalogId">
					<s:text name="icon.asterisk"/><s:text name="module.catalog.catalogCode"/></label>
				<div class="controls">
					<s:textfield id="catalogId" name="catalog.catalogId" maxlength="30" cssClass="string required"/>
				</div>	
			</div>
			<div class="control-group">
				<label class="control-label" for="catalogName">
					<s:text name="icon.asterisk"/><s:text name="module.catalog.catalogName"/></label>
				<div class="controls">
					<s:textfield id="catalogName" name="catalog.catalogName" maxlength="50" cssClass="string required" />
				</div>
			</div>
			<div class="control-group">
				<s:label cssClass="control-label" key="module.catalog.parentCatalogName" for="parentCatalogName"/>
				<div class="controls">
					<s:textfield  id="parentCatalogName" label="" name="catalog.parentCatalog.catalogName" cssClass="string"
					 readonly="true" size="50"/>
					<s:hidden  id="parentCatalogId" label="" name="catalog.parentCatalog.id"/>
					<img src="${ctx}/themes/common/images/spacer.gif" class="clear_lookupfield" 
						width="15" height="10" border="0" align="absmiddle" title="Select" 
						onclick='$("#popupDialogSelectBox").dialog("open")'>
					<img src="${ctx}/themes/common/images/spacer.gif" class="clear_lookupfield" 
						width="15" height="10" border="0" align="absmiddle" title="Clear" 
						onclick="clearLookupField('#parentCatalogId','#parentCatalogName')">
					<span class="help-block">Select the primary catalog.</span>
				</div>
			</div>
			<div class="control-group">
				<s:label cssClass="control-label" key="module.common.description" for="description"/>
				<div class="controls">
					<s:textarea  id="description" label="" name="catalog.description" rows="5" cols="65"/>
				</div>
			</div>
		</fieldset>
		
		<fieldset>
		<legend>Catalog Images</legend>
			 <div class="control-group">
				<s:label cssClass="control-label" key="module.catalog.catalogCode" for="uploadedFile" />
				<div class="controls">
					<s:file id="uploadedFile" name="uploadedFile" size="120"/>
				</div>
			</div>
		</fieldset>
		<div class="control-group">
			<div class="controls">
				<button id="save" type="submit" class="btn btn-primary"><s:text name="button.save"/></button>
				<button id="saveAndNew" class="btn"><s:text name="button.saveAndNew"/></button>
				<button id="cancel" class="btn"><s:text name="button.cancel"/></button>
			</div>
		</div>
	</form>
</body>
